<template>
	<view class="container">

		<template v-if="hasInit">

			<view  class="chartContainer">
				<view class="headerWrapper">
					<view class="left">
						访问人数(每小时更新一次)
					</view>
				</view>

				<view  class="uchartWrapper" :style="[chartVisitUsersHeightCss]">
					<qiun-data-charts type="bar" :opts="optsVisitUsers" 
						:reshow="hasDataVisitUsers"
						:chartData="chartDataVisitUsers"
						:canvasId="'chartDataVisitUsersId'" :canvas2d="true" />
				</view>

			</view>
			<view class="chartContainer">
				<view class="headerWrapper">
					<view class="left">
						访问次数(每小时更新一次)
					</view>
				</view>

				<view  class="uchartWrapper" :style="[chartVisitTimesHeightCss]">
					<qiun-data-charts type="bar" :opts="optsVisitTimes"
						:reshow="hasDataVisitTimes"
						:chartData="chartDataVisitTimes"
						:canvasId="'chartDataVisitTimesId'" :canvas2d="true" />
				</view>

			</view>
			
			<view class="chartContainer" v-if="rankingList.length>0">
				<view class="headerWrapper">
					访问明细(每小时更新一次)
				</view>
				<view class="tableBox">
					<view class="item">
						<view class="left" style="width: 40%;">
							日期
						</view>
						<view class="middle" style="width: 30%;">
							访问人数
						</view>
						<view class="right" style="width: 30%;">
							访问次数
						</view>
					</view>
					
					<view class="item" :key="index" v-for="(item,index) in rankingList">
						<view class="left" style="width: 40%;">
							{{item.createTime}}
						</view>
						<view class="middle text-1line-ellipsis" style="width: 30%;">
							{{item.visitUsers}}
						</view>
						<view class="right" style="width: 30%;">
							{{item.visitTimes}}
						</view>
					</view>
					
					<view class="endLine">
					
					</view>
				</view>
			</view>
			

			<view v-else class="chartContainer">
				<view class="headerWrapper">
					访问明细(每小时更新一次)
				</view>
				<u-empty
					text="暂无记录"
					mode="history">
				</u-empty>	
			</view>	
		</template>



	</view>
</template>

<script>
	let timeId = null
	const api = require('@/static/js/api.js')
	const utils = require("@/static/js/utils.js")
	import popupCard from "../../../components/popupCard/index.vue"
	const uchartsConfig = require('@/pages/shop/static/js/config-ucharts.js')

	import qiunDataCharts from "@/pages/shop/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
	import { formatTime } from "@/static/js/utils.js"
	let that = null

	const uchatOpts = {
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 30, 0, 5],
		enableScroll: false,
		legend: {
			show: false
		},

		xAxis: {
			boundaryGap: "justify",
			disableGrid: false,
			min: 0,
			axisLine: false,
			max: 40
		},
		yAxis: {},
		extra: {
			bar: {
				type: "group",
				width: 30,
				meterBorde: 1,
				meterFillColor: "#FFFFFF",
				activeBgColor: "#000000",
				activeBgOpacity: 0.08,
				linearType: "custom",
				barBorderCircle: true,
				seriesGap: 2,
				categoryGap: 2
			}
		}
	}

	export default {
		data() {
			return {
				hasInit: false,
				statisticTime: "",
			
				hasDataVisitTimes: false,
				hasDataVisitUsers: false,
				
				selectType: 0,
				startDay: "",
				endDay: "",

				//===用户
				rankingList: [],


				chartDataVisitUsers: {
					categories: [],
					series: [{
						"name": "访问人数",
						"data": []
					}]
				},
				chartDataVisitTimes: {
					categories: [],
					series: [{
						"name": "访问次数",
						"data": []
					}]
				},

				optsVisitUsers: JSON.parse(JSON.stringify(uchatOpts)),
				optsVisitTimes: JSON.parse(JSON.stringify(uchatOpts)),
				
				chartVisitUsersHeightCss: {},
				chartVisitTimesHeightCss: {},
			};
		},

		components: {
			qiunDataCharts
		},
		props: {
			selectObj:{
				type: Object,
				default: {
					selectType: -1,
				}
			}
		},
		watch: {
			selectObj:{
				handler: function observer(obj) {
					if (obj.selectType>=0){
						this.refresh(obj)
					}
				},
				immediate: true,
				deep: true,
			}
		},
		mounted() {
			that = this;
			this.statisticTime = utils.formatTime(new Date(), "yyyy-MM-dd hh") + ":00"
		},
		methods: {	
			refresh(obj) {
				this.selectType = obj.selectType
				this.startDay = obj.startDay
				this.endDay = obj.endDay		
				this.getContentStatistic();
				this.getContentDetailStatistic();
			},
			//====内容
			getContentStatistic() {
				let that = this
				uni.showLoading({
					title: "数据加载中..."
				})
				this.hasInit = false
	
				this.hasDataVisitUsers = false
				this.hasDataVisitTimes = false
				if (this.selectType >= 2) {
					api.getContentStatistic({
						param: {
							startDay: this.startDay,
							endDay: this.endDay,
						}
					}).then(res => {
						console.log(res)
						if (res.success) {
							that.contentStatisticFormat(res.data);
						}
					}).finally(err=>{
						uni.hideLoading()
					})
				}else{
					let tab = [0, -1, -30]
					let period = tab[this.selectType]
					api.getContentStatistic({
						param: {
							period: period,
						}
					}).then(res => {
						console.log(res)
						if (res.success) {
							that.contentStatisticFormat(res.data);
						}
					}).finally(err=>{
						uni.hideLoading()
					})
				}		
			},
			getContentDetailStatistic() {
				let that = this
				if (this.selectType >= 2) {
					api.getContentDetailStatistic({
						param: {
							startDay: this.startDay,
							endDay: this.endDay,
						}
					}).then(res => {
						console.log(res)
						if (res.success) {
							that.rankingList = res.data
						}
					})
				}else{
					let tab = [0, -1, -30]
					let period = tab[this.selectType]
					api.getContentDetailStatistic({
						param: {
							period: period,
						}
					}).then(res => {
						console.log(res)
						if (res.success) {
							that.rankingList = res.data
						}
					})
				}
				
			},
			contentStatisticFormat(pushList) {
				let that = this
				var xMaxVisitTimes = 0;
				var xMaxVisitUsers = 0;
					
				this.chartDataVisitUsers.categories.splice(0, this.chartDataVisitUsers.categories.length)
				this.chartDataVisitUsers.series[0].data.splice(0, this.chartDataVisitUsers.series[0].data.length)

				this.chartDataVisitTimes.categories.splice(0, this.chartDataVisitTimes.categories.length)
				this.chartDataVisitTimes.series[0].data.splice(0, this.chartDataVisitTimes.series[0].data.length)

				for (var i = 0; i < pushList.length; i++) {
					if (pushList[i].visitUsers>0){
						this.chartDataVisitUsers.categories.push(pushList[i].contentName);
						this.chartDataVisitUsers.series[0].data.push(pushList[i].visitUsers);
					}

					if (pushList[i].visitTimes>0){
						this.chartDataVisitTimes.categories.push(pushList[i].contentName);
						this.chartDataVisitTimes.series[0].data.push(pushList[i].visitTimes);
					}
					if (xMaxVisitTimes < pushList[i].visitTimes) {
						xMaxVisitTimes = pushList[i].visitTimes
					}

					if (xMaxVisitUsers < pushList[i].visitUsers) {
						xMaxVisitUsers = pushList[i].visitUsers
					}
				}
									
				this.chartVisitUsersHeightCss = {
					height: (this.chartDataVisitUsers.categories.length*40 + 120) + 'rpx'
				} 
				this.chartVisitTimesHeightCss = {
					height: (this.chartDataVisitTimes.categories.length*40 + 120) + 'rpx'
				} 
				this.hasDataVisitUsers = (xMaxVisitUsers>0)
				this.hasDataVisitTimes = (xMaxVisitTimes>0)
				
				//==补充数据
				if (this.chartDataVisitUsers.categories.length == 0){
					this.chartDataVisitUsers.categories.push('小程序首页')
					this.chartDataVisitUsers.series[0].data.push(0)
				}
				if (this.chartDataVisitTimes.categories.length == 0){
					this.chartDataVisitTimes.categories.push('小程序首页')
					this.chartDataVisitTimes.series[0].data.push(0)
				}
				
				
				this.optsVisitUsers.xAxis.max = parseInt((xMaxVisitUsers + 10) / 10) * 10
				this.optsVisitTimes.xAxis.max = parseInt((xMaxVisitTimes + 10) / 10) * 10 
				
				this.hasInit = true
			},
			

		}	

	};
</script>

<style lang="scss">
	.container {
		width: 100%;
		background-color: #f3f3f3;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.timeWrapper {
		display: flex;
		align-items: center;
		width: 750rpx;
		background: #FFFFFF;
		padding: 20rpx 0 15rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;

		.item {
			padding: 0 20rpx;
			height: 45rpx;
			border-radius: 10rpx;
			text-align: center;
			line-height: 45rpx;
			background: #F3F1F3;
			font-size: 24rpx;
			color: #999999;
			margin-left: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.iconRange{
				width: 30rpx;
				height: 30rpx;
				margin-left: 15rpx;
				margin-right: 15rpx;
				background-image: url(@/static/image/icon_time_range.png);
			}
		}

		.itemEn {
			background: #5E9FFD;
			color: #FFFFFF;
		}
	}

	.chartContainer {
		width: 714rpx;
		background: #FFFFFF;
		box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;
		border-radius: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;

		.headerWrapper {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
		}

		.uchartWrapper {
			width: 100%;
			height: 600rpx;
		}

	}

	.tableBox {
		width: 100%;

		.item {
			display: flex;
			height: 59rpx;
			text-align: center;
			line-height: 59rpx;
			font-size: 28rpx;
			color: #666666;
			width: 100%;

			.left {
				border-left: #e3e3e3 solid 1px;
				border-top: #e3e3e3 solid 1px;
				height: 100%;
				width: 20%;
			}

			.middle {
				border-left: #e3e3e3 solid 1px;
				border-top: #e3e3e3 solid 1px;
				height: 100%;
				width: 40%;
			}

			.right {
				border-left: #e3e3e3 solid 1px;
				border-top: #e3e3e3 solid 1px;
				border-right: #e3e3e3 solid 1px;
				height: 100%;
				width: 40%;
			}
		}

		.endLine {
			width: 100%;
			height: 1px;
			background-color: #e3e3e3;
		}
	}
</style>